LILLY PILLY — Development Brief 


e Second round of revision & enhancements for Alingha 
e Please create a copy of WIP v14-DAWN | ADAM revisions | 110524 


(as | have implemented several changes to your round1 - STAGING work) 


WIP v14-DAWN | ADAM revisions | 110524 
$ Last saved: Just now 
Dawn version 14.0.0 v 


Announcement bar TEE 


1. Reduce the padding on the top and bottom 
of the ‘Annoucement bar’. 


2. It looks like you previously made the 
‘Announcement bar text’ font size smaller.. 
| don’t want font smaller just the height of 
the actual ‘Announcement bar.’ 


3. Please increase the ‘Announcement bar text’ 
size a little, so it is back to the size it 
originally was. 


4. Vertically centre the text so it is perfectly in 
centre vertically (right now, after you 
changed it, you left it unevenly positioned as 
you can see from mobile screenshot) 


5. Make a rule that the ‘Announcement bar’ is 
only visible on homepage for both DESKTOP 
and MOBILE 
et SEA 
Q LILLY PILLY 


Sustainably & ethically made Australian label. 


Natural fibre clothing made of organic linen, 


cashmere, merino wool & pure silk 


AVERAGE STORE RATING 


Homepage 


After further review and discussion with Wendy, | may have misunderstood her general rule of making everything to edge of screen. 


Its actually only some sections on the HOMEPAGE that she wants to go to the edge of the screen. 
In order to resolve this we discussed if | just use a section for a ‘Featured Collection’ or ‘Featured Product’ sections to break up the grid look of the Homepage. 


* So either | need to be able to add some custom CSS code to the specific ‘Image with Text’ section, (eg currently showcasing ‘Knitwear’) to effectively add more 
padding on each side to create more white space around the section. Alternatively | might be able to just reduce the display width to (eg) 80%. | think that would 
achieve the outcome we want. 

* Ifyou can tell me the CSS code then I can just use that in the sections | want to select to make smaller in visible screen width. 


* | will then use same code to do something similar on our ‘Collage’ (eg Our Signature Pants) below, which is essentially our ‘Featured Product’ section. 


* Visually we are trying to do something similar to how its done on the DISSH homepage. 


1. Make first 2 product images of the selected product display in the ‘quick buy pop-up’ 
2. Allow User to then select/toggle between other colour swatch variants, which will then display those 2 
product images (ie each colour variant would change the corresponding first 2 images of that colour variant) 

3. We are happy to keep the same size of the pop-up window/frame, we just need you to move the ‘product 
name+info+buttons section’ to further to the right side a bit more to fill the white space and create some 
space for the 2 image width 

Ensure there is no vertical scroll of the pop-up window (like their currently is) 

See mock-up design below. 
6. ProductName — heading needs to be smaller font size. Where in ‘edit Code’ can | change this? 
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Quick Buy pop-up 
- DESKTO 


Eva Silk Cami 


Pixie Linen Top 
$179.00 


LILLY PILLY Lela Linen Top 
$129.00 


view all 


As styled on you 


Proposed design / mock-up 


Quick Buy pop-up : MOBILE 


1. Allow User to then select/toggle between other colour 
swatch variants, which will then display the respective 
product images (ie each colour variant would change 
the corresponding first image of that colour variant) 


2. ProductName — heading needs to be smaller font size 
(size 24). Where in ‘edit Code’ can | change this? 


3. Then as you scroll down, see how the icon+text under 
‘ADD TO BAG button’ currently truncates to second 
line. Fix this so that the 3 iconttext elements fit on the 
1 line like desktop view. 

(NB the issue is only visible when testing on actual 
‘mobile device’ but not visible when in ‘Shopify CMS 
mobile view’ 


Proposed design / mock-up 
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Tina Linen Top 


$139.00 


‘Buy Now Pay Later! available at checkout 


Colour: IVORY 
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Tina Linen Top 


$139.00 


Buy Now Pay Later’ available at checkout 


Colour: OATMEAL 


E Free Delivery CB Easy Returns 


EB Buy Now, Pay Later 


View full details > 
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. Add a text link “Continue Shopping” and position underneath “CHECKOUT” button 


Cart page — mobile and desktop 


. When clicked it takes use back to ‘last collection viewed’ url **How to instructions 


. Remove the words “Colour:” and “Size:” so that just the Colour & Size value remains 


Original/current 


. Remove the unit price under product item name , (as its already OK with just the 


Bi x 
product total price on right side) Your Bag 


. Bold the word “Sub-total” and also the actual sub-total amount (eg) $318.00 AUD 


$168.00, 


. Add a 1px line break/divider between each list Product in cart, same colour & style as 
the line above Sub-total footer. If there are 3 or 4 product in cart then a line between 
each product. (see arrows pointing to position in mock-up below) 


aie cy Top $129.00 


Your Bag x Your Bag x 


Bailey Cotton Cardi $189.00 Bailey Cotton Cardi $189.00 


-ı +| 
Your Bag x 
Nicky Knit Top $129.00 $129.00 
$129.00 Bailey Cotton cara 5185.00 
[= +] @ E 1 +] i ee -i 
Micay Krit Top 123.00 
Sub-total $318.00 AUD j = 
gbole 
Sub-total $318.00 AUD 


Shipping and discounts calculated at checkout. 
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Original/current Proposed design / mock-up Proposed design / mock-up 


Product page oe MOBI LE 4. Then as you scroll down , see how the icon+text under ADD TO BAG 


currently truncates to second line. Fix this so that the 3 icon+text 
elements fit on the 1 line like desktop view. 
(NB/ the issue is only visible when testing on actual ‘mobile device’ but 


1. Make image edge to edge on mobile view not visible when in ‘Shopify CMS mobile view’ 
2. Changethe “< 1/6 >“todots toshow multiple images are available... 
refer to ‘DISSH mobile — product page Size 
3. Allow User to swipe left or right and this will change the corresponding dots Ds a g a 


Proposed design / mock-up 


Original/current 
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EB Free Delivery ($ Easy Returns 


E buy Now, Pay Later 


Product Features v 
Size & Fit ~% 
Fabric & Care ~ 
Shipping & Returns { 
& Share 


You may also like 


Addison Knit Top 


Addison Knit Top 
$149.00 


$149.00 


Original/current 
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Collection page E face ae 


ALLOUR PRODUCTS 


1: Move position of ‘ICON+Filter and sort’ to RIGHT side on MOBILE & 
DESKTOP 

2. Then bring the ‘CollectionName’ (H1) to sit just above the ‘collection grid’. 
This reduces the white space. 

3. Then remove the white space left from H1 area. To make it look tighter 
like mock-up. 

4. Remove the word ‘Filter:’ as its kind of self explanatory. 

5. Notice the ‘Sort by:’ dropdown menu is different style to Filter checkbox 


buttons. Can we make ‘Sort by’ the same style as ‘Filter by’. Like they do 
with SPELL.CO Collection Page (eg https://spell.co/collections/dresses) 


FABRICS v COLOURS v SIZEVY SORT BY v 


Proposed design / mock-up 
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ALL OUR PRODUCTS 


C Linen (48) 
1 sik Best selling 


Alphabetically, A-Z 
\phabetically, Z-A 

Price, low to high 

Price, high to low 


Date, old to new 
Date, new to old 


Theme Changes — ‘HERO Image’ block 


Q: Is it better to just download a App from Shopify store (eg Section App: Hero#1) — or better to recreate this 
functionality ourselves? 


1. Assign different MOBILE vs DESKTOP IMAGE 
+ Allow to have different HOMEPAGE HERO image for DESKTOP vs MOBILE (because we want to be able to use portrait images from our 
photo shoots. They don’t work in the landscape view on DESKTOP very well) 
* Eg with IMPULSE theme | can choose a different image for DESKTOP vs MOBILE. 
Also | can change the height of the displayed image, and define the +ALT tag for each different image. 
(refer HERO (optional Slideshow_ in Live_211123_v1.6.4_Wishlist_SS23) 


Home page 
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